<template>
	<view class="userdetacon" >
		<div class="nav">
			<div class="back" :style="{opacity:firstOpacity,paddingTop: systemBarHeight + 'px'}">
				<image @click="backto" :src="back"/>
			</div>
			<div class="back-tow" :style="{ opacity: elementOpacity ,paddingTop: systemBarHeight + 'px'}">
				<div class="con">
				<image @click="backto" :src="blackback"/>
				<div class="inco">
						<image :src="userinfo.image"/>
				</div>
					<div class="text">{{userinfo.nickname}}</div>
					</div>
						<div class="follow" @click="removefollow" v-if="greeting(this.userinfo)==1">互相关注</div>
						<div class="follow" @click="removefollow" v-if="greeting(this.userinfo)==2">已关注</div>
						<div class="follow" @click="followthat"   v-if="greeting(this.userinfo)==3">回关</div>
						<div class="follow" @click="followthat"   v-if="greeting(this.userinfo)==4">关注</div>
			</div>
		</div>
			<div class="content">
				<image :src="userinfo.image"/>
			</div>
		
		<div class="detacon-box">
			<div class="txandhz">
				<div class="userin">
				<div class="tx">
					<image :src="userinfo.image"/>
				</div>
				    <div class="text">{{userinfo.nickname}}</div>
				</div>
				<div>
				<div class="follow" @click="removefollow" v-if="greeting(this.userinfo)==1">互相关注</div>
				<div class="follow" @click="removefollow" v-if="greeting(this.userinfo)==2">已关注</div>
				<div class="follow" @click="followthat"   v-if="greeting(this.userinfo)==3">回关</div>
				<div class="follow" @click="followthat"   v-if="greeting(this.userinfo)==4">关注</div>
				<div class="follow" v-if="addfollowlist.followid!==addfollowlist.nowuserid" @click="gochatpage(addfollowlist.followid)">发送私信</div>
				</div>
			</div>
			<div class="jianjie">
				<span>{{userinfo.intro}}</span>
			</div>
			<div class="likenum">
				<div class="likecon"><span class="num">{{userinfo.fansnum}}</span><span class="likecon-title">关注TA的</span></div>
				<div class="likecon"><span class="num">{{userinfo.concernnum}}</span><span class="likecon-title">TA关注的</span></div>
			</div>
			<div class="bokelist">
				 <div class="tab-title" @click="gotoShare(item.current)" v-for="(item, index) in tabs">{{item.name}}
				 <div class="tips" v-show="current==item.current"></div>
				 </div>
			</div>
			<div  v-if="current==1"><userallsetar v-if="userinfo!==''" :userid="userinfo.id"></userallsetar></div>
			<div  v-if="current==3"><allsetar></allsetar></div>
				<div  v-if="current==2"><allsetar></allsetar></div>
		</div>
		
	</view>
</template>

<script>
	import { judrelation,followthis,otherguanzhu } from '@/utils/Dataprocessing.js'
	import {userdetails} from '@/request/setarticle.js'
	import userallsetar from './userallsetar.vue'
	import websocketManager from '@/websocketService.js';
	import allsetar from '@/pages/home/components/allsetar.vue'
	export default {
		name: 'MyTemplateComponent',
		components: {
		  allsetar,
		  userallsetar
		},
		data() {
			return {
				systemBarHeight: 0,
				tabs: [
				  { name: "博客", current: 1 },
				  { name: "资源", current: 2 },
				  { name: "动态", current: 3 }
				],
				 current: 1,
				// 一级初始透明度
				firstOpacity:1,
				// 二级初始透明度
				      elementOpacity: 0,
				      // 页面滚动距离
				      scrollTop: 0,
				back:require('@/static/back.png'),
				blackback:require('@/static/backclazk.png'),
				followlist:this.$store.state.followlist,
				userId: '',
				userinfo:'',
				addfollowlist:{
					nowuserid:this.$store.state.id,
					followid:'',
					type:'followthat'
				},
			};
		},
		onLoad(options) { // options 包含了从上一个页面传递过来的所有参数
		this.getSysteminfo();
			if (options.userid) {
				this.userId = options.userid;
				this.getuserid()
				// 这里可以继续处理 userid，比如发起请求加载用户详情等
			}
		},
		computed: {
			// 计算属性

		},
		mounted() {},
		watch: {
		    '$store.state.followlist': {
		      handler(newValue) {
		        // 当 store 中的 followlist 发生变化时，更新组件的数据
		        this.followlist = newValue;
		      },
		      deep: true, // 开启深度监听，如果 followlist 是一个对象或数组
		      immediate: true // 立即触发 handler，这会在组件创建时使用初始状态更新一次数据
		    }
		  },
		methods: {
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			gochatpage(e){
				uni.navigateTo({
					url: `/pages/message/components/chatpage?Id=${e}&name=${this.userinfo.username}&image=${this.userinfo.image}&sourceIsInfo=1` // 注意路径格式  
				});
			},
			gotoShare(e){
				this.current=e
			},
			greeting(e){
				return judrelation(e)
			},
			getuserid() {
				userdetails(this.userId).then((e)=>{
				if(e.code==200){
					this.userinfo=e.data
						this.addfollowlist.followid=e.data.id
				}
				})
			},
			//点击关注
			followthat(){
			 
				followthis(this.addfollowlist).then((e)=>{
					uni.showToast({
						title: '关注成功',
						icon: 'none',
						duration: 2000,
					}) 
					websocketManager.send(this.addfollowlist);		
				this.getuserid()
				})
			},
			removefollow(){
				uni.showModal({
					// title: '提示',
					content: '不再关注该用户',
					success: (res)=> {
						if (res.confirm) {
								otherguanzhu(this.addfollowlist).then((e)=>{
									this.getuserid()
								})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			backto() {
				// console.log("点击")
				uni.navigateBack({
					delta: 1
				})
			},
			    handlePageScroll(e) {
			      // 获取当前滚动条距离顶部的距离
			      this.scrollTop = e.scrollTop;
			
			      // 根据滚动位置计算新的透明度
				   const firstOpacity = 0 + (this.scrollTop / 175); // 当滚动到175px时完全显示
			      const newOpacity = 1 - (this.scrollTop / 175); // 当滚动到175px时完全透明
			      if (newOpacity >= 0 && newOpacity <= 1) {
			        this.firstOpacity = newOpacity;
					this.elementOpacity=firstOpacity
			      }
			    }
		},
		onPageScroll(e) {
		    this.handlePageScroll(e);
		  }
	};
</script>

<style scoped lang="scss">
	.back{
		z-index: 999;
		position: fixed;
		height: 3rem;
		width: 100vw;
		display: flex;
		align-items: center;
		image{
			margin-left: 0.5rem;
			width: 1.5rem;
			height: 1.5rem;
		}
	}
	.back-tow{
		background: #ffffff;
		z-index: 999;
		position: fixed;
		height: 3rem;
		width: 100vw;
		display: flex;
		align-items: center;
		    justify-content: space-between;
		.con{
			display: flex;
			align-items: center;
		image{
			margin-left: 0.5rem;
			width: 1.5rem;
			height: 1.5rem;
		}
		.inco{
			margin-left: 0.3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 1.5rem;
			height: 1.5rem;
			border-radius: 50%;
			overflow: hidden;
			image{
				object-fit: contain;
				margin-left: 0px;
			}
		}
		.text{
			margin-left: 5rem;
		}
		}
		.follow{
			
			margin-right: 2rem;
			font-size: 0.8rem;
			padding: 0.2rem 1rem;
			border: 1px solid #ada6a6;
			border-radius: 0.9rem;
		}
	}
	.content{
		    height: 200px;
		image{
			    width: 100%;
			    height: 100%;
			    object-fit: cover;
				  filter: blur(10px);
		}
	}
	.detacon-box{
		background: #fff;
		    min-height: 100vh;
		    border-radius: 1rem 1rem 0 0;
		    z-index: 10;

			    position: absolute;
			    top: 175px;
		    width: 100vw;
			  
	}
	/* 创建一个玻璃质感的覆盖层 */
	.content::before {
	  content: ''; /* 必须设置 content 属性 */
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	      height: 12rem;
	  bottom: 0;
	  background: rgba(139, 139, 139, 0.54); /* 半透明白色背景，你可以调整RGBA值以改变透明度和颜色 */
	  backdrop-filter: blur(10px); /* 模糊效果，Webkit浏览器支持 */
	  -webkit-backdrop-filter: blur(10px); /* Safari 和 Chrome 的前缀版本 */
	  z-index: 1; /* 确保覆盖层在图片之上 */
	}
	.detacon-box{
		padding: 0 1rem;
		    box-sizing: border-box;
		.txandhz{
			height: 6rem;
			    width: 100%;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
				
				.userin{
					display: flex;
					        flex-direction: column;
					        align-items: flex-start;
			.tx{
				    position: relative;
				    top: -2rem;

			    width: 4rem;
			    height: 4rem;
			    overflow: hidden;
			    
			    border-radius: 50%;
			    background: #fff;
			    padding: 4px;
				image{
					
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.text{
				
				    position: absolute;
				    top: 3.6rem;
				    font-size: 1.2rem;
				    font-weight: 700;

			}
			}
		.follow{
			margin-bottom: 0.5rem;
			margin-right: 1rem;
			font-size: 0.8rem;
			padding: 0.2rem 1rem;
			border: 1px solid #ada6a6;
			border-radius: 0.9rem;
		}
		}
	}
	.likenum{
		margin-top: 1rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.likecon{
			margin-right: 1rem;
			.num{
				    font-size: 1.6rem;
			}
			.likecon-title{
				
			}
		}
	}
	.bokelist{
		margin-top: 2rem;
		border: 1px solid #f3ebeb;
		border-left: 0px;
		border-right: 0px;
		padding: 1rem 0;
		display: flex;
		.tab-title{
			margin: 0 1rem;
		}
		.tips{
			height: 0.2rem;
			width: 1.8rem;
			background-color: #000;
			position: relative;
			bottom: -1rem;
		}
	}
</style>